<template>
	<view style="width: 100vw; height: 100vh;">
		<l-signature backgroundColor="#fff" ref="signatureRef" landscape></l-signature>
	</view>
	<view style="" class="option-box ">
		<button @click="onClick('clear')">清空</button>
		<button @click="onClick('undo')">撤消</button>
		<button @click="onClick('save')">保存</button>
	</view>
</template>

<script setup>
	const signatureRef = ref(null);
	const signaInfo = reactive({
		src: ''
	});
	const onClick = (type) => {
		if (!signatureRef.value) {
			uni.$u.toast('操作失败，请重试');
			return
		}
		if (type == 'save') {
			uni.showLoading({
				title: '上传中...',
				mask: true
			})
			signatureRef.value.canvasToTempFilePath({
				success: (res) => {
					// 是否为空画板 无签名 生成图片的临时路径
					// console.log('生成图片的临时路径', res, res.tempFilePath);
					if (res.tempFilePath == '' || res.isEmpty) {
						uni.$u.toast('请签名');
						uni.hideLoading();
						return
					}
					uploadSign(res.tempFilePath);
				}
			})
			return
		}
		if (type == 'undo') {
			signatureRef.value.undo()
		}
		if (type == 'redo') {
			signatureRef.value.redo()
		}
		if (type == 'clear') {
			signatureRef.value.clear()
		}
	}
	const uploadSign = async (path) => {

		const result = await $Api.uploadFile.uploadFilePromise(path);
		uni.hideLoading();
		if (result.code === 1) {
			signaInfo.src = result.data.fullurl;
			uni.$emit('addSignature', {
				type: '签名更新',
				src: result.data.fullurl
			})
			uni.navigateBack({
				delta: 2
			});

		} else {
			uni.showToast({
				title: '上传失败，请重试',
				icon: 'none'
			});
		}
	}
</script>

<style lang="scss">
	page {
		// background: #fff !important;
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.option-box {
		width: 100vh;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		height: 100rpx;
		background-color: #fff;
		justify-content: center;
		align-items: center;
		transform: rotate(90deg) translateX(-100rpx);
		box-sizing: border-box;
		transform-origin: bottom left;
		box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.1);

		button {
			margin: 0 20rpx;
		}
	}
</style>